<template>
	<view class="main-page" style="background: white;align-items: center;">
		<view class="single-box">
			<view class="row-container">
				<text class="font-ff621f-32">*</text>
				<text class="font-333-32 font-bold">店铺名称</text>
			</view>
			<input 
				v-model="shopName"
				class="font-333-28"
				placeholder-class="font-999-28"
				placeholder="请输入与官方平台完全一致的店铺名"
				style="text-align: right;width: 70%;"
			/>
		</view>
		<view class="divider"></view>
		<view class="single-box">
			<view class="row-container">
				<text class="font-ff621f-32">*</text>
				<text class="font-333-32 font-bold">平台名称</text>
			</view>
			<text class="font-999-28">请选择平台名称</text>
		</view>
		<view class="divider"></view>
		<view class="single-box">
			<view class="row-container">
				<text class="font-ff621f-32">*</text>
				<text class="font-333-32 font-bold">店铺地址</text>
			</view>
			<text class="font-999-28">选择地区 (省-市-区)</text>
		</view>
		<view class="row-container-end" style="width: 100%;">
			<textarea
				class="address-input"
				v-model="address"
				placeholder="请输入详细地址 (必须和官方平台上地址一致)"
				placeholder-class="font-999-28"
			></textarea>
		</view>
		<view class="divider"></view>
		<view class="single-box">
			<view class="row-container">
				<text class="font-ff621f-32">*</text>
				<text class="font-333-32 font-bold">联络人</text>
			</view>
			<input 
				v-model="realName"
				class="font-333-28"
				placeholder-class="font-999-28"
				placeholder="请输入您的姓名"
				style="text-align: right;width: 70%;"
			/>
		</view>
		<view class="divider"></view>
		<view class="single-box">
			<view class="row-container">
				<text class="font-ff621f-32">*</text>
				<text class="font-333-32 font-bold">联络手机</text>
			</view>
			<input 
				v-model="mobile"
				class="font-333-28"
				placeholder-class="font-999-28"
				placeholder="手机号必须正确，否则无法入驻"
				style="text-align: right;width: 70%;"
			/>
		</view>
		<view class="divider"></view>
		<text class="confirm">提交商家入驻申请</text>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopName:'',
				address:'',
				realName:'',
				mobile:''
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.single-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: calc(100% - 60rpx);
		height: 105rpx;
	}
	
	.divider{
		width: calc(100% - 60rpx);
		height: 1rpx;
		background: #F5F5F5;
	}
	
	.address-input{
		padding: 20rpx;
		background: #F5F5F5;
		border-radius: 10rpx;
		width: 460rpx;
		height: 118rpx;
		color: #333333;
		font-size: 28rpx;
		margin-right: 30rpx;
		margin-bottom: 30rpx;
	}
	
	.confirm{
		width: calc(100% - 60rpx);
		height: 88rpx;
		background: #FFD100;
		text-align: center;
		line-height: 88rpx;
		border-radius: 10rpx;
		margin-top: 70rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
	}
	
</style>
